<template>
  <!--  -->
  <el-row class="home-box" :gutter="20">
    <el-col :span="6" class="tag-item">
      <div class="tag-item-price">
        <div class="icon-box">
          <el-icon>
            <StarFilled />
          </el-icon>
        </div>
        <div class="text-box">
          <p class="text-item-title">今日收入</p>
          <p>503,225.00</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6" class="tag-item">
      <div class="tag-item-price">
        <div class="icon-box">
          <el-icon>
            <StarFilled />
          </el-icon>
        </div>
        <div class="text-box">
          <p class="text-item-title">今日收入</p>
          <p>503,225.00</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6" class="tag-item">
      <div class="tag-item-price">
        <div class="icon-box">
          <el-icon>
            <StarFilled />
          </el-icon>
        </div>
        <div class="text-box">
          <p class="text-item-title">今日收入</p>
          <p>503,225.00</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6" class="tag-item">
      <div class="tag-item-price">
        <div class="icon-box">
          <el-icon>
            <StarFilled />
          </el-icon>
        </div>
        <div class="text-box">
          <p class="text-item-title">今日收入</p>
          <p>503,225.00</p>
        </div>
      </div>
    </el-col>
  </el-row>
  <!-- chart图表 -->
  <el-row class="home-chart" :gutter="20">
    <el-col :span="12">
      <!-- <div class="chart-user" ref="chartUser"></div> -->
      <common-chart chart-type="bar" :options="barOptions"></common-chart>
    </el-col>

    <el-col :span="12">
      <common-chart chart-type="line" :options="lineOptions"></common-chart>
    </el-col>
  </el-row>
  <el-row>
    <el-col>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="(val,index) in tableLabel" :key="index" :prop="index" :label="val" />
      </el-table>

    </el-col>
  </el-row>
</template>


<script setup>
//引入echarts
import CommonChart from "../../components/CommonChart.vue";
// import * as echarts from "echarts";
import { getCurrentInstance, onMounted, ref } from "vue";

const {proxy} =getCurrentInstance()

const barOptions = {
  title: {
    text: "每周用户",
    textStyle: {
      fontSize: 14,
    },
  },
  color: ["rgba(51, 202, 187, 0.8)"],
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [180, 352, 155, 841, 435, 606, 321],
      type: "bar",
    },
  ],
};
const lineOptions = {
  color: ["rgba(51, 202, 187, 0.8)"],
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [10, 22, 58, 46, 75, 50, 86],
      type: "line",
      smooth: true,
    },
  ],
};

const tableLabel= {
  name:'商品',
  todayBuy:'今日购买',
  monthBuy:'本月购买',
  totalBuy:'总购买'
}



//表格数据
let tableData=ref([])


// 请求数据
const getTableList = async()=>{
  let res=await proxy.$api.getTableData()
  tableData.value=res.tableData
  console.log(res);
  
}
onMounted(()=>{
  getTableList()
})


</script>

<style lang="less" scoped>
#main {
  width: 600px;
  height: 400px;
}

.home-box {
  background-color: #fff;
}

.tag-item {
  margin: 15px 0;
  height: 90px;
  color: #fff;

  .tag-item-price {
    padding: 0 10px;
    border-radius: 5px;
    background-color: rgb(51, 202, 187);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700;

    .text-item-title {
      font-size: 10px;
      font-weight: 500;
      margin-bottom: 10px;
    }
  }
}

.chart-user {
  height: 200px;
}

.home-chart {
  padding: 10px 0;
  background-color: #fff;
  margin-top: 7px;
}
</style>